{% macro Img(id,id1) %}
    <img id="{{ id }}" src="#" alt="" style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;" />

    <div id="{{ id }}-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center;">
        <img id="{{ id1 }}-modal-img" src="#" alt="Original Image" style="max-width: 90%; max-height: 90%;" />
    </div>

    <script>
        let timer;

        EventLoad(async () => {
            let img = document.getElementById("{{ id }}");
            if (img) {
                img.style.width = "100%";
                img.style.height = "100%";
                img.style.objectFit = "cover";
            }
        })

        Event('{{ id }}', 'mouseenter', (event) => {
            timer = setTimeout(() => {
                document.getElementById("{{ id }}-modal").style.display = 'flex';
            }, 1000);
        });

        Event('{{ id }}', 'mouseleave', (event) => {
            clearTimeout(timer);
            document.getElementById("{{ id }}-modal").style.display = 'none';
        });
    </script>
{% endmacro %}
